<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<html>
<head>
<title>日程管理</title>
<style type="text/css">
#calendar {
    width: 900px;
}
</style>
<link href="${ctx}/static/fullcalendar/fullcalendar.css" rel="stylesheet" type="text/css" />
<link href="${ctx}/jeasyui-extensions/jquery-easyui-theme/default/easyui.css" rel="stylesheet" type="text/css" />
<link href="${ctx}/jeasyui-extensions/jquery-easyui-theme/icon.css" rel="stylesheet" type="text/css" />
<link href="${ctx}/jeasyui-extensions/icons/icon-all.css" rel="stylesheet" type="text/css" />

<script src="${ctx}/jeasyui-extensions/jquery/jquery-1.10.2.js" type="text/javascript"></script>
<script src="${ctx}/static/fullcalendar/jquery-ui.custom.min.js" type="text/javascript"></script>
<script src="${ctx}/static/fullcalendar/fullcalendar.min.js" type="text/javascript"></script>

<script src="${ctx}/jeasyui-extensions/jquery-easyui-1.3.6/jquery.easyui.min.js" type="text/javascript"></script>
<script src="${ctx}/jeasyui-extensions/jquery-easyui-1.3.6/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
<script type="text/javascript">
	$(function() {
		$('#calendar').fullCalendar({
			header : {
				left : 'prev,next today',
				center : 'title',
				right : 'month,agendaWeek,agendaDay'
			},
			editable : true,
			dragOpacity : {//设置拖动时事件的透明度 
				agenda : .5,
				'' : .6
			},
			eventDrop : function(event, dayDelta, minuteDelta, allDay, revertFunc) {//拖动事件 
				$.post("${ctx}/basic/calendar/dragDrop", {
					id : event.id,
					daydiff : dayDelta,
					minudiff : minuteDelta,
					allday : allDay
				}, function(data) {
					if (!data.success) {
						revertFunc(); //恢复原状 
					}
					$.messager.show({
						title : "提示",
						msg : data.msg,
						showType : 'show'
					});
				}, "json");
			},
			eventResize : function(event, dayDelta, minuteDelta, revertFunc) {
				$.post("do.php?action=resize", {
					id : event.id,
					daydiff : dayDelta,
					minudiff : minuteDelta
				}, function(msg) {
					if (msg != 1) {
						alert(msg);
						revertFunc();
					}
				});
			},
			selectable : true, //允许用户拖动日期
			select : function(startDate, endDate, allDay, jsEvent, view) {
				var start = $.fullCalendar.formatDate(startDate, 'yyyy-MM-dd HH:mm');
				var end = $.fullCalendar.formatDate(endDate, 'yyyy-MM-dd HH:mm');
				$("#fm").form("clear");
				$('#fm').form('load', {
					start : start,
					end : end
				});
				$("#allDay").attr("checked", "checked");
				$("#endTimeTr").show();
				$("#isend").attr("checked", true);
				$("#dlg").dialog("open").dialog("setTitle", "新增日程");
			},
			events : "${ctx}/basic/calendar/json",
			dayClick : function(date, allDay, jsEvent, view) {
				var start = $.fullCalendar.formatDate(date, 'yyyy-MM-dd HH:mm');//格式化日期 
				$("#fm").form("clear");
				$('#fm').form('load', {
					start : start
				});
				$("#allDay").attr("checked", "checked");
				$("#dlg").dialog("open").dialog("setTitle", "新增日程");
			}
		});
		$("#isend").click(function() {
			if ($("#endTimeTr").css("display") != "none") {
				$("#endTimeTr").hide();
			} else {
				$("#endTimeTr").show();
			}
		});
	});
	function fn_save() {
		$("#fm").form("submit", {
			url : "${ctx}/basic/calendar/update",
			success : function(data) {
				$('#calendar').fullCalendar('refetchEvents'); //重新获取所有事件数据
				$.messager.show({
					title : "提示",
					msg : data.msg,
					showType : 'show'
				});
				$("#dlg").dialog('close');
			}
		});
	}
	function fn_delete() {
		var id = $("#id").val();
		if (!id) {
			$.messager.show({
				title : "警告",
				msg : "请点击已存在的日程再进行删除操作",
				showType : 'show'
			});
		} else {
			$.messager.confirm("您确定要进行该操作？", function(c) {
				if (c) {
					$.get("${ctx}/basic/calendar/delete/" + id, function(result) {
						$.messager.show({
							title : "提示",
							msg : result.msg,
							showType : 'show'
						});
						if (result.success) {
							$('#calendar').fullCalendar('refetchEvents'); //重新获取所有事件数据
							$("#dlg").dialog('close');
						}
					}, 'json');
				}
			});
		}
	}
</script>
</head>

<body>
    <div data-options="region:'west',border:false,fit:true" style="width:200px;">
    
    
    
    </div>
	<div data-options="region:'center'" style="width:500px;height:300px">
		<div id="calendar"></div>
		<div id="dlg" class="easyui-dialog" style="width: 340px; height: 300px; padding: 10px 20px"
			data-options="iconCls:'icon-save',resizable:true,modal:true, buttons:[
	                    { text: '删除', iconCls: 'icon-hamburg-busy', handler: function () { fn_delete(); } },
	                    { text: '保存', iconCls: 'icon-ok', handler: function () { fn_save(); } },
	                    { text: '取消', iconCls:'icon-cancel', handler: function () { $('#dlg').dialog('close'); } }
	                ],closed:true">
			<form id="fm" method="post">
				<input type="hidden" name="id" id="id" />
				<table id="tbl">
					<tr>
						<td><label>开始时间:</label></td>
						<td><input name="start" class="easyui-my97" data-options="required: true,datefmt:'yyyy-MM-dd HH:mm'"></td>
					</tr>
					<tr id="endTimeTr" style="display: none">
						<td><label>结束时间:</label></td>
						<td><input name="end" class="easyui-my97" data-options="datefmt:'yyyy-MM-dd HH:mm'"></td>
					</tr>
					<tr>
						<td></td>
						<td><label><input id="allDay" name="allDay" type="checkbox" value="1">是否全天</label></td>
					</tr>
					<tr>
						<td></td>
						<td><label><input type="checkbox" id="isend" name="isend">结束时间</label></td>
					</tr>
					<tr>
						<td><label>日程内容:</label></td>
						<td><textarea name="title" class="easyui-validatebox" data-options="required: true" cols="20" rows="4"></textarea></td>
					</tr>
				</table>

			</form>
		</div>
	</div>
</body>
</html>
